<!DOCTYPE html>
{% load static %}
{% load custom_tags %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示首页</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="icon" href="{% static 'images/logo.png' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/index.css' %}">
</head>
<body>
<div class="navbar">
    <div class="logo">
        <img class="brand" src="{% static 'images/logo.png' %}">
    </div>
    <div class="user-actions">
        <a style="padding-right: 20px;padding-left: 20px;text-decoration: none;color: #FFFFFF" href="/pdd">拼多多</a>
        图片裁剪模型：
        <select id="yoloSelect" class="model-select">
            {% if trained_model %}
            <option value="yolo-best.pt" {% if yolo_model == 'yolo-best.pt' %}selected{% endif %}>新微调模型
                [{{ trained_size }} MB]
            </option>
            {% endif %}
            <option value="yolov8m-oiv7.pt" {% if yolo_model == 'yolov8m-oiv7.pt' %}selected{% endif %}>yolov8m-oiv7.pt
                [50.3 MB]
            </option>
            <option value="yolov8m-seg.pt" {% if yolo_model == 'yolov8m-seg.pt' %}selected{% endif %}>yolov8m-seg.pt
                [52.4
                MB]
            </option>
            <option value="yolov8m-world.pt" {% if yolo_model == 'yolov8m-world.pt' %}selected{% endif %}>
                yolov8m-world.pt
                [55.9 MB]
            </option>
            <option value="yolov8m-worldv2.pt" {% if yolo_model == 'yolov8m-worldv2.pt' %}selected{% endif %}>
                yolov8m-worldv2.pt [54.6 MB]
            </option>
            <option value="yolov8m.pt" {% if yolo_model == 'yolov8m.pt' %}selected{% endif %}>yolov8m.pt [49.7 MB]
            </option>
            <option value="yolov8l-oiv7.pt" {% if yolo_model == 'yolov8l-oiv7.pt' %}selected{% endif %}>yolov8l-oiv7.pt
                [84.5 MB]
            </option>
            <option value="yolov8l-seg.pt" {% if yolo_model == 'yolov8l-seg.pt' %}selected{% endif %}>yolov8l-seg.pt
                [88.1
                MB]
            </option>
            <option value="yolov8l-world-cc3m.pt" {% if yolo_model == 'yolov8l-world-cc3m.pt' %}selected{% endif %}>
                yolov8l-world-cc3m.pt [91.2 MB]
            </option>
            <option value="yolov8l-world.pt" {% if yolo_model == 'yolov8l-world.pt' %}selected{% endif %}>
                yolov8l-world.pt
                [91.2 MB]
            </option>
            <option value="yolov8l-worldv2-cc3m.pt" {% if yolo_model == 'yolov8l-worldv2-cc3m.pt' %}selected{% endif %}>
                yolov8l-worldv2-cc3m.pt [89.9 MB]
            </option>
            <option value="yolov8l-worldv2.pt" {% if yolo_model == 'yolov8l-worldv2.pt' %}selected{% endif %}>
                yolov8l-worldv2.pt [89.9 MB]
            </option>
            <option value="yolov8l.pt" {% if yolo_model == 'yolov8l.pt' %}selected{% endif %}>yolov8l.pt [83.7 MB]
            </option>
            <option value="yolov8x-oiv7.pt" {% if yolo_model == 'yolov8x-oiv7.pt' %}selected{% endif %}>yolov8x-oiv7.pt
                [131
                MB]
            </option>
            <option value="yolov8x-seg.pt" {% if yolo_model == 'yolov8x-seg.pt' %}selected{% endif %}>yolov8x-seg.pt
                [137
                MB]
            </option>
            <option value="yolov8x-world.pt" {% if yolo_model == 'yolov8x-world.pt' %}selected{% endif %}>
                yolov8x-world.pt
                [141 MB]
            </option>
            <option value="yolov8x-worldv2.pt" {% if yolo_model == 'yolov8x-worldv2.pt' %}selected{% endif %}>
                yolov8x-worldv2.pt [140 MB]
            </option>
            <option value="yolov8x.pt" {% if yolo_model == 'yolov8x.pt' %}selected{% endif %}>yolov8x.pt [131 MB]
            </option>
            <option value="yolov8x6-500.pt" {% if yolo_model == 'yolov8x6-500.pt' %}selected{% endif %}>yolov8x6-500.pt
                [187
                MB]
            </option>
            <option value="yolov8x6-oiv7.pt" {% if yolo_model == 'yolov8x6-oiv7.pt' %}selected{% endif %}>
                yolov8x6-oiv7.pt
                [188 MB]
            </option>
            <option value="yolov8x6.pt" {% if yolo_model == 'yolov8x6.pt' %}selected{% endif %}>yolov8x6.pt [186 MB]
            </option>
            <option value="yolov9c-seg.pt" {% if yolo_model == 'yolov9c-seg.pt' %}selected{% endif %}>yolov9c-seg.pt
                [53.9
                MB]
            </option>
            <option value="yolov9c.pt" {% if yolo_model == 'yolov9c.pt' %}selected{% endif %}>yolov9c.pt [49.4 MB]
            </option>
            <option value="yolov9e-seg.pt" {% if yolo_model == 'yolov9e-seg.pt' %}selected{% endif %}>yolov9e-seg.pt
                [117
                MB]
            </option>
            <option value="yolov9e.pt" {% if yolo_model == 'yolov9e.pt' %}selected{% endif %}>yolov9e.pt [112 MB]
            </option>
            <option value="yolov9m.pt" {% if yolo_model == 'yolov9m.pt' %}selected{% endif %}>yolov9m.pt [39.1 MB]
            </option>
            <option value="yolov10b.pt" {% if yolo_model == 'yolov10b.pt' %}selected{% endif %}>yolov10b.pt [39.7 MB]
            </option>
            <option value="yolov10l.pt" {% if yolo_model == 'yolov10l.pt' %}selected{% endif %}>yolov10l.pt [50 MB]
            </option>
            <option value="yolov10m.pt" {% if yolo_model == 'yolov10m.pt' %}selected{% endif %}>yolov10m.pt [32.1 MB]
            </option>
            <option value="yolov10x.pt" {% if yolo_model == 'yolov10x.pt' %}selected{% endif %}>yolov10x.pt [61.4 MB]
            </option>
            <option value="yolo11m.pt" {% if yolo_model == 'yolo11m.pt' %}selected{% endif %}>yolo11m.pt [38.8 MB]
            </option>
            <option value="yolo11m-seg.pt" {% if yolo_model == 'yolo11m-seg.pt' %}selected{% endif %}>yolo11m-seg.pt
                [43.3
                MB]
            </option>
            <option value="yolo11l-seg.pt" {% if yolo_model == 'yolo11l-seg.pt' %}selected{% endif %}>yolo11l-seg.pt
                [53.5
                MB]
            </option>
            <option value="yolo11l.pt" {% if yolo_model == 'yolo11l.pt' %}selected{% endif %}>yolo11l.pt [49 MB]
            </option>
            <option value="yolo11x-seg.pt" {% if yolo_model == 'yolo11x-seg.pt' %}selected{% endif %}>yolo11x-seg.pt
                [119
                MB]
            </option>
            <option value="yolo11x.pt" {% if yolo_model == 'yolo11x.pt' %}selected{% endif %}>yolo11x.pt [109 MB]
            </option>
            <option value="yolo12m.pt" {% if yolo_model == 'yolo12m.pt' %}selected{% endif %}>yolo12m.pt [39 MB]
            </option>
            <option value="yolo12l.pt" {% if yolo_model == 'yolo12l.pt' %}selected{% endif %}>yolo12l.pt [51.2 MB]
            </option>
            <option value="yolo12x.pt" {% if yolo_model == 'yolo12x.pt' %}selected{% endif %}>yolo12x.pt [114 MB]
            </option>
        </select>
        <a style="padding-right: 20px;padding-left: 20px;text-decoration: none;color: #FFFFFF" href="/admin">登录</a>
        <span style="padding-right: 20px">购物车</span>
    </div>
</div>

<div id="loading" style="display: none;">
  <div class="spinner"></div>
  <p>图片处理中...</p>
</div>

<div class="search-bar">
    <label class="custom-checkbox">
        <input type="checkbox" name="yolo" id="yolo">
        <span class="checkmark"></span>
        物品识别
    </label>
    <form action="/" method="get">
        <input class="text" name="q" id='query' type="text" value="{{ q }}" placeholder="输入关键字搜索">
        <span class="photo-search-btn">
            <span class="upload-bg" onclick="document.getElementById('upload-image').click()"></span>
            <input type="file" id="upload-image" accept="image/*" style="display: none;">
        </span>
        <input type="hidden" id="image_path" name="image_path" value="{{ path }}">
        <button id='submit_search' type="submit" class="button cw-icon"><i></i>搜索</button>
    </form>
</div>

<div class="detect-container">
    {% for key, value in detect_objects.items %}
        <div class="image-wrapper">
            <a href="?object_path={{ key }}">
                <img src="{% media_url_path value %}" alt="图片1">
            </a>
        </div>
    {% endfor %}
</div>
<!-- 分页导航 -->

<ul class="pagination-cards">
    {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page=1&{{ params }}" title="First">
                首页
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}&{{ params }}" title="Previous">
                上页
            </a>
        </li>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
        {% if num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                <a class="page-link" href="?page={{ num }}&{{ params }}">{{ num }}</a>
            </li>
        {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}&{{ params }}" title="Next">
                下页
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&{{ params }}" title="Last">
                末页
            </a>
        </li>
    {% endif %}
</ul>


<div class="product-grid">
    {% for item in page_obj %}
        <div class="product-card">
            {% if item.image and  item.image.url %}
                <img src="{{ item.image.url }}" alt="商品图片">
            {% elif item.image_url %}
                <img src="{{ item.image_url }}" alt="商品图片">
            {% endif %}
            <div class="product-info">
                <h3>{{ item.name }}</h3>
                <p>￥{{ item.price }}</p>
                {% if simi_index is not None %}
                    <p>相似指数：{% safe_get simi_index item.id %}</p>
                {% endif %}
                <p>评分：★★★★☆</p>
            </div>
        </div>
    {% endfor %}
    <!-- 更多商品卡片 -->
</div>

<script>
    const fileInput = document.getElementById('upload-image');
    const status = document.getElementById('status');
    const queryInput = document.getElementById('query')
    
    queryInput.addEventListener('change', function(){
         document.getElementById('image_path').disabled = true;
        queryInput.disabled = false;
    });

    fileInput.addEventListener('change', async (event) => {
        const file = event.target.files[0];
        if (!file) return;
        document.getElementById("loading").style.display = "block";
        // 创建 FormData 对象
        const formData = new FormData();
        formData.append('file', file);
        const checkbox = document.getElementById('yolo');
        // 判断是否选中
        if (checkbox.checked) {
            formData.append('yolo', '1');
            console.log('Checkbox已选中');
        }

        try {
            // 发送 POST 请求
            const response = await fetch('/image_upload', {
                method: 'POST',
                body: formData,
            });

            if (response.ok) {
                const result = await response.json();
                document.getElementById('image_path').value = result.path;
                document.getElementById('query').disabled = true;
                document.getElementById('submit_search').click();
            }
        } catch (error) {
            alert('图片解析向量服务异常');
        }
    });

    document.getElementById('yoloSelect').addEventListener('change', function () {
        fetch(`/set_yolo_model?model=${this.value}`)
            .then(response => response.json())
            .then(data => console.log(data));
    });
</script>
</body>
</html>